<template>
  <div class="m-screenful">
    <el-icon
      class="full-screen"
      title="全屏"
      @click.stop="click"
      style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
  </div>
</template>

<script lang="ts" setup>
  import screenfull from './index'
  import { ElMessage } from 'element-plus'
  import {onBeforeUnmount, onMounted, ref} from "vue";
  import { useStore } from 'vuex'
  import { useRouter , useRoute } from 'vue-router'

  let isFullscreen = ref(false)
  const store = useStore()
  const router = useRouter()

  const click = () => {
    // if (!screenfull.isEnabled) {
    //   ElMessage({
    //     message: '你的浏览器不支持',
    //     type: 'warning'
    //   })
    //   return false
    // }
    // store.dispatch('setting/setFullScreen', true)
    // screenfull.toggle()
    router.push("/screenMap")

  }
  const change = ()=>{
    isFullscreen.value = screenfull.isFullscreen
    if(!isFullscreen.value) {
      store.dispatch('setting/setFullScreen', false)
    }
  }

  const init = ()=>{
    if (screenfull.isEnabled) {
      screenfull.on('change', change)
    }
  }

  const destroy = ()=>{
    if (screenfull.isEnabled) {
      screenfull.off('change', change)
    }
  }

  onMounted(()=>{
    // init()
  })

  onBeforeUnmount(()=>{
    // destroy()
  })
</script>

<style lang="scss" scoped>
  .m-screenful{
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
  }
  .transverseMenu{
    .full-screen{
      color: white;
    }
  }
</style>
